<template>
  <div class="color-box">
    <!-- 循环生成div并绑定背景颜色/可换成图片 -->
    <!-- 绑定class可以使用数组的方式 :class='[color, border]'-->
    <div
      :class="['color', item === value ? 'border' : '']"
      v-for="(item, index) in color"
      :key="index"
      :style="{ background: item }"
      @click="$emit('input', item)"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["value"],//利用传递过来的值控制颜色选中状态
  data() {
    return {
      color: ["red", "cyan", "yellow", "green", "pink"],
    }
  },
}
</script>

<style lang="scss" scoped>
.color-box {
  display: flex;
  justify-content: space-around;
  .color {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .border {
    border: 2px solid black;
  }
}
</style>
